<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作业07 JavaScript基础之京东购物车商品管理训练</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="container">
    <table id="cart">
      <caption>全部商品&nbsp;<span>3</span></caption>
      <thead>
        <tr>
          <!-- 行标题使用 `th` (而不是 `td` 来表示)，然后通过 `scope` 属性的值说明它们是行标题（`row`）还是列标题（`col`） -->
          <th scope="col" class="th-checkbox all-checkbox">
            <input type="checkbox" checked>
          </th>
          <th scope="col" class="select-all">全选</th>
          <th scope="col">商品</th>
          <th scope="col"></th>
          <th scope="col" class="th-price">单价</th>
          <th scope="col" class="th-quant">数量</th>
          <th scope="col" class="th-subtotal">小计</th>
          <th scope="col" class="th-action">操作</th>
        </tr>
      </thead>

      <!-- 京东自营 -->
      <tbody>
        <tr class="item bg-color">
          <td class="tb-checkbox"><input type="checkbox" class="checkbox" checked></td>
          <td class="image"><img src="./img01.jpg" alt=""></td>
          <td class="product-desc">屈臣氏（Watsons）干姜味汽水 碳酸饮料 调酒净饮推荐</td>
          <td class="category">
            <p>苏打汽水干姜味</p>
            <p>听装</p>
          </td>
          <td class="price">¥<span>88.86</span></td>
          <td class="quant">
            <button class="sub">-</button>
            <input type="text" value="1" class="quant-value" readonly="true">
            <button class="add">+</button>
          </td>
          <td class="subtotal">
            ¥<span>88.00</span>
          </td>
          <td class="action">
            <a href="">删除</a>
            <a href="">移到我的关注</a>
          </td>
        </tr>
        <tr class="item bg-color">
          <td class="tb-checkbox"><input type="checkbox" class="checkbox" checked></td>
          <td class="image"><img src="./img02.jpg" alt=""></td>
          <td class="product-desc">屈臣氏（Watsons）苏打汽水 苏打水汽水饮料 0糖0卡路里气泡</td>
          <td class="category">苏打汽水原味</td>
          <td class="price">¥<span>86.00</span></td>
          <td class="quant">
            <button class="sub">-</button>
            <input type="text" value="1" class="quant-value" readonly="true">
            <button class="add">+</button>
          </td>
          <td class="subtotal">
            ¥<span>86.00</span>
          </td>
          <td class="action">
            <a href="">删除</a>
            <a href="">移到我的关注</a>
          </td>
        </tr>
        <tr class="item bg-color">
          <td class="tb-checkbox"><input type="checkbox" class="checkbox" checked></td>
          <td class="image"><img src="./img03.jpg" alt=""></td>
          <td class="product-desc">家逸衣帽架 实木落地衣架可折叠卧室挂衣架多功能收纳置物大衣服架子</td>
          <td class="category">棕色经典款【75cm】</td>
          <td class="price">¥<span>159.00</span></td>
          <td class="quant">
            <button class="sub">-</button>
            <input type="text" value="1" class="quant-value" readonly="true">
            <button class="add">+</button>
          </td>
          <td class="subtotal">
            ¥<span>159.00</span>
          </td>
          <td class="action">
            <a href="">删除</a>
            <a href="">移到我的关注</a>
          </td>
        </tr>
        
      </tbody>
      <tfoot>
        <tr>
          <td class="footer-checkbox all-checkbox">
            <input type="checkbox" checked></td>
          <td colspan="3">
            <span>全选</span>
            <a>删除选中商品</a>
            <a>移到关注</a>
            <strong><a>清理购物车</a></strong>
          </td>
          <td colspan="2" class="footer-quant">
            已选择&nbsp;&nbsp;<span>3</span>&nbsp;&nbsp;件商品
          </td>
          <td class="footer-total">总价:&nbsp;<span>333.00</span></td>
          <td class="checkout"><a>去结算</a></td>
        </tr>
      </tfoot>
    </table>
  </div>

  <script>
    

      // 1. 实现购物车中商品数量的加减操作
      // 获取购物车中所有显示商品数量的td元素节点
      const tdList = document.querySelectorAll("#cart td.quant");
      // 遍历
      tdList.forEach(item => {
        // 获取当前td中的加、减按钮和数量节点
        const sub = item.querySelector(".sub"); // 减号按钮
        const add = item.querySelector(".add"); // 加号按钮
        const num = item.querySelector(".quant-value") // 商品数量节点
        // 分别为sub和add添加鼠标点击事件，实现对应商品数量加减操作
        sub.addEventListener("click", () => {
           num.value--;
           let v = parseInt(num.value);
           if(v < 1){
             num.value = 1;
           }
           updateTotal(); // 调用自定义统计函数
        });
        add.addEventListener("click", () => {
           num.value++;
           updateTotal(); // 调用自定义统计函数
        });
      });


      //2. 完成购物车中的全选/全不选
      // 获取两个全选的选择框节点
      const allCheckboxs = document.querySelectorAll("#cart .all-checkbox input");
      // 获取所有的商品对应的选择框节点
      const tdCheckboxs = document.querySelectorAll("#cart .tb-checkbox input");
      // 遍历全选节点并绑定点击事件
      allCheckboxs.forEach( item => {
         // 为当前全选节点添加点击事件
         item.addEventListener("click",function(){
            //console.log(this.checked);//输出当前节点选中状态
            // 遍历所有商品对应选择框节点，并同步选中状态
            tdCheckboxs.forEach( ob => ob.checked = this.checked );
            // for(var i = 0; i < tdCheckboxs.length; i++){
            //     tdCheckboxs[i].checked = this.checked;
            // }
            // 同步其他全选节点（遍历所有全选节点都同步选中状态)
            allCheckboxs.forEach( ob => ob.checked = this.checked );
            // for(var i = 0; i < allCheckboxs.length;i++){
            //    allCheckboxs[i].checked = this.checked;
            // }

            updateTotal(); // 调用自定义统计函数
         });
      });

      // 遍历所有商品的选择框节点，并绑定点击事件
      tdCheckboxs.forEach(item => {
        // 绑定点击事件
        item.addEventListener("click",() => {
            // 通过数组的every方法来判断所有商品选择框是否全部选中
            //console.log(Array.from(tdCheckboxs)); // 使用Array.from()方法转成真正数组
            let isAll = Array.from(tdCheckboxs).every(checkbox => checkbox.checked);
            //console.log(isAll);
            // 同步其他全选节点（遍历所有全选节点都同步选中状态）
            allCheckboxs.forEach( ob => ob.checked = isAll );
            // for(var i = 0; i < allCheckboxs.length;i++){
            //    allCheckboxs[i].checked = isAll;
            // }
            updateTotal(); // 调用自定义统计函数
        });
      });


      //3, 统计购物车的商品小计，总数量和总金额
      function updateTotal(){
        // 获取所含有购物车中的商品(行节点信息)
        const shopLists = document.querySelectorAll("#cart tr.item");
        // 声明一个总数量和总金额的变量
        let num = 0, total = 0;
        // 遍历所有商品tr节点
        shopLists.forEach(shop => {
           // 通过当前商品tr节点，获取里面选择框节点，单价、数量，小计节点
           const checkbox = shop.querySelector(".tb-checkbox input"); //选择框元素节点
           let price = shop.querySelector(".price span").innerHTML; //单价数值
           let quant = shop.querySelector(".quant .quant-value").value; //数量的值
           const subtotal = shop.querySelector(".subtotal span"); //小计元素节点
           // 计算小计：(单价乘以数量赋给小计元素节点)
           subtotal.innerHTML = (price * quant).toFixed(2); // toFixed()指定保留小数点几位？
           // 判断当前商品的选择框是否选中，并统计它们的数量与金额
           if (checkbox.checked == true){
              num += parseInt(quant); // 累加总数量
              total += price * quant; // 累加总金额
           }
        });
        // 将总数量和总金额显示页面中
        document.querySelector("#cart .footer-quant span").innerHTML = num;
        document.querySelector("#cart .footer-total span").innerHTML = total.toFixed(2);
      }
      updateTotal(); // 调用自定义统计函数

  </script>
</body>
</html>
